html,
body
{
    background: #f5f5f5;
}

.company
{
    .header-bg
    {
        overflow: hidden;

        height: 12.5rem;

        background: url('../../images/company_bg.png') no-repeat center/cover transparent;

        .title
        {
            font-size: 1.0625rem;
            font-weight: 400;

            margin-top: 2.375rem;

            text-align: center;

            color: #fff;
        }

        .search-wrap
        {
            display: flex;

            height: 2.0rem;
            margin: 1.5625rem .9375rem;

            border-radius: 1.25rem;
            background: #fff;

            .left
            {
                display: flex;
                overflow: hidden;

                width: 2.875rem;

                align-items: center;
                justify-content: center;

                .search-icon
                {
                    display: inline-block;

                    width: 1.25rem;
                    height: 1.25rem;

                    background: url('../../images/icon-search.png')no-repeat center/cover transparent;
                }
            }

            .middle
            {
                display: flex;

                flex: 1;

                .search-text
                {
                    font-size: .875rem;

                    flex: 1;
                }
            }

            .right
            {
                display: flex;

                width: 3.75rem;

                align-items: center;
                justify-content: center;

                .search-btn
                {
                    font-size: .875rem;

                    height: 1.6rem;
                    padding: 0 .75rem;

                    text-align: center;

                    color: #fff;
                    border: 0;
                    border-radius: 1.25rem;
                    background: #ff7b00;
                }
            }
        }
    }

    .content
    {
        position: fixed;
        top: 8.4375rem;
        bottom: 0;

        height: auto;

        .detail-wrap
        {
            position: relative;

            margin: 0 1rem;

            &:before
            {
                position: absolute;
                z-index: 2;
                top: 1px;
                right: -6px;
                left: -6px;

                height: 2px;

                content: ' ';

                background: #fff;
                box-shadow: 0 0 16px rgba(0, 0, 0, 1);
            }

            .item
            {
                position: relative;

                overflow: hidden;

                height: 13.875rem;
                margin: 0 0 1.25rem;
                padding: 0 .4375rem 0;

                background: url('../../images/content-bg.png')no-repeat center/contain transparent;
                .title
                {
                    display: flex;

                    height: 3rem;

                    border-bottom: 1px dashed #ccc;

                    align-items: center;

                    .icon-company
                    {
                        width: 1.25rem;
                        height: 1.25rem;
                        margin: 0 .3125rem;

                        background: url('../../images/icon-company.png')no-repeat center/cover transparent;
                    }

                    .sub-title
                    {
                        font-size: .875rem;
                        line-height: 1.2rem;

                        padding-left: .5rem;

                        color: #333;

                        flex: 1;
                    }
                }

                .card-detail
                {
                    display: flex;

                    align-items: baseline;

                    .icon-wrap
                    {
                        display: flex;

                        width: 1.875rem;

                        align-items: center;
                        justify-content: center;

                        .icon-check
                        {
                            width: .75rem;
                            height: .75rem;

                            background: url('../../images/icon-check.png')no-repeat center/cover transparent;
                        }
                    }

                    .card-content
                    {
                        display: flex;

                        min-width: 0;
                        height: 3.5rem;
                        margin: .3125rem 0 0;

                        color: #000;

                        flex: 1;
                        flex-flow: column;
                        justify-content: center;

                        .top-wrap,
                        .bottom-wrap
                        {
                            line-height: 1.375rem;
                        }

                        .label
                        {
                            font-size: .8125rem;

                            display: inline-block;

                            width: 3.125rem;

                            text-align: right;
                        }

                        .label-text
                        {
                            font-size: .8125rem;

                            padding: 0 .3125rem;
                        }

                        .bottom-wrap
                        {
                            display: flex;

                            .left,
                            .right
                            {
                                font-size: .8125rem;

                                flex: 1;
                            }
                        }
                    }

                    .expire-content
                    {
                        height: auto;
                    }

                    .card-unit
                    {
                        font-size: .8125rem;

                        display: flex;

                        color: #999;

                        flex-flow: column;

                        span
                        {
                            line-height: 1.375rem;
                        }
                    }
                }

                .wave-bg
                {
                    position: absolute;
                    right: 0;
                    bottom: -1px;
                    left: 0;

                    height: .8125rem;

                    background: url('../../images/bottom-cricle.png')no-repeat .75rem bottom/contain transparent;
                }
            }
        }
    }
}
